Below is a simple navigation bar which I have implemented using bootstrap.
HTML
<!doctype html>
<html>
<head>
<title> Bootstrap </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/mobile.css">
</head>
<body>
<div id = "container">
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Home</a>
</nav>
<h4>Search WWW</h4>
<ul class="nav">
<li> <a href="#"> Bing </a></li>
<li> <a href="#"> Google </a></li>
<li> <a href="#"> Yahoo </a></li>
</ul>
<h4> Dubious Websites </h4>
<ul class="nav">
<li> <a href="#"> Reddit </a></li>
<li> <a href="#"> Tumblr </a></li>
<li> <a href="#"> Youtube </a></li>
</ul>
<h4> Reference </h4>
<ul class="nav">
<li> <a href="#"> Wow </a></li>
<li> <a href="#"> Adobe </a></li>
<li> <a href="#"> Wikipedia </a></li>
</ul>
</div>
</body>
</html>
CSS
body{
margin: 15px;
}
div {
width: 25%;
}
.navbar {
background-color: lightgray;
font-weight: bold;
}
nav a {
text-shadow: 1px 1px #fff;
}
h4 {
margin-top: 20px;
}
ul {
border: 1px solid lightgray;
border-radius: 15px;
}
ul li a {
color: black;
}
ul li a:hover {
color: lightblue;
}
.nav li a:hover {
background: none;
}
I have the following questions:
1) How to align text in the navigation bar (e.g. Navigation bar with the class name navbar navbar-default)?
2) I do not understand how I am able to select the nav element using .navbar when the class name given to it is navbar navbar-default?
3) I do not understand why the following code fragment does not work
ul li a:hover {
color: lightblue;
background: none;
}
But this fragment works
ul li a:hover {
color: lightblue;
}
.nav li a:hover {
background: none;
}
So basically, my question is that ul has the class name nav. So, why are ul li a:hover and .nav li a:hover not referring to the same element?
