CODEWITHSUNDEEP
htmlcss
mohamed nada
mohamed nada

Reputation: 3

how to make an <a> have full width in a <li> in a navigation menu?

Hello guys i am trying to make that effect is that when u hover over any part of li the onhover effect of takes effect like this website: http://ironsummitmedia.github.io/startbootstrap-landing-page/ top menu umm here is my code: 

<head>
    <style>
        #mody { position:absolute;
 width:100%;
 height:60;
 z-index:15;
 top:0%;
 left:0%;
 background:red;}

 #logo {
    margin-left:250px;
    margin-top:5px;
 }

 #first_nav {
    position:absolute;
    top:0px;
    left:1100px;
    padding:5px;

 }
 #first_nav ul {
    text-decoration:none;
    list-style:none;
    height:inherit;
 }
 #first_nav ul li {
    display:inline;
    margin-right:0px;
    padding:5px;
    float:left;
    background:yellow;
 }
#first_nav ul li a {
    padding:10px;
    text-decoration:none;

}
#first_nav ul li a:hover {
    color:pink;
}
    </style>
</head>


<body>


        <div id='mody'>
            <div id='logo'>
                <a href="#"><img src="mody.jpg" width="50px" height="50px" alt="title"/></a>
            </div>

            <div id="first_nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">DADA</a></li>
                </ul>
            </div>

        </div>




</body>

P.S. if have any more idea's how to make my menu better or better line of code feel free to write it and I accept all kind of criticism Thank you for reading

Upvotes: 0

Views: 42

Answers (2)

JakeParis
JakeParis

Reputation: 11210

Put the float:left on the a instead of the li. Add display:inline-block to the a element as well. This way, the whole element is clickable instead of just a part of it.

Forexample: 

ul { list-style: none; overflow: auto;}

li {background: #ccc; }

.foo li {
  float: left;
  padding: 30px;
  border: 1px solid blue;
  }

.bar a {
  float: left;
  padding: 30px;
  border: 1px solid blue;
  }

.foo li:hover, .bar a:hover {
  background: yellow;
  }
On this one, only the text is clickable, even though the box looks clickable.
<ul class="foo">
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  </ul>
<hr style="float:none;">
On this one, the whole box is the link:

<ul class="bar">
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  </ul>

Upvotes: 1

Tom
Tom

Reputation: 44821

To make something take up the whole line in HTML tell it to display as block:

#first_nav ul li a {
  display: block;
}

Upvotes: 2

Related Questions