How do I get the nav menu to cover full width of div

StackOverflow https://stackoverflow.com/questions/23452050

  •  15-07-2023
  •  | 
  •  

Question

I was just wounding how to get the navigation menu to cover the full width of the div because I cannot seem to do so help would be much appreciated

Here is the jsfiddle example: http://jsfiddle.net/PJ6FR/

Thanks

<html>
<style>
* {
margin: 0px;
padding: 0px;
}

ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
}

ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
margin-right: 0px;
float: left;
}
   #navmenu ul {
       display: inline-block;
       list-style-type: none;
} 

#page1 {text-align: center;} 

ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 30px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
}



ul#navmenu .sub1 a {
margin-top: 0px;
}

ul#navmenu .sub2 a {
margin-left: 0px;
}

ul#navmenu li:hover > a {
background-color: grey;
}

ul#navmenu li:hover a:hover {
background-color: red;
}

ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 30px;
left: 0px;
}

ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 126px;
}

ul#navmenu li:hover .sub1 {
display: block;
}

ul#navmenu .sub1 li:hover .sub2 {
display: block;
}

.darrow {
font-size: 8pt;
position: absolute;
top: 8px;
right: 1px;
}

#navmenu {
    display: inline-block;
    text-align: center;
    list-style-type: none;
    margin: 0px auto;
    padding: 0px;
    position: relative;
    border: 2px solid green;
}
.rarrow {
font-size: 8pt;
position: absolute;
top: 6px;
right: 0px;
}

 #page1 .link1{
color: grey;
border-top: 2px solid red;
}
#page2 .link2{
color: grey;
border-top: 2px solid red;
}
#page3 .link3{
color: grey;
border-top: 2px solid red;
}
.container{
width: 100%;
min-width: 1024px;
max-width: 1440px;
height: 1000px;
margin: 0px auto;   
}



#box2{
height: 1000px;
width: 100%;
background-color: yellow;
float: left;
margin: 0px auto;   
}
#boxinbox1 {
width: 100%;
height: 200px;
background-color: red;  
}

</style>
</head>
<body>
<div class="container">

<div id="box2">
<div id="page1"><div id="boxinbox1">weiuhgqiogq</div>
<ul id="navmenu">
<li><a href="dropdown1.html" class="link1">Home</a></li>
<li><a href="dropdown2.html" class="link2">hyperlink 2</a><font color="white">
<span class="darrow">&#9660;</font></span>
<ul class="sub1">
    <li><a href="#">hyperlink 2.1</a></li>
    <li><a href="#">hyperlink 2.2</a></li>
    <li><a href="#">hyperlink 2.3</a></li>
</ul>
</li>
<li><a href="#">hyperlink 3</a></li>
<li><a href="#">hyperlink 4</a><span class="darrow"><font color="white">&#9660;               

 </font></span> 
<ul class="sub1">
    <li><a href="#">hyperlink 4.1</a></li>
    <li><a href="#">hyperlink 4.2</a></li>
    <li><a href="#">hyperlink 4.3</a><span class="rarrow">
<font color="white">&#9654;</font></span>
        <ul class="sub2">
            <li><a href="#">hyperlink 4.3.1</a></li>
            <li><a href="#">hyperlink 4.3.2</a></li>
            <li>
<a href="dropdown3.html" class="link3">hyperlink 4.3.3</a></li>
        </ul>
    </li>
</ul>
</li>
<li><a href="#">hyperlink 5</a></li>
</ul></div></div>

</div>
</body>
</html>
Was it helpful?

Solution

Just add this:

ul#navmenu{
    width:100% !important;
}

Demo

OTHER TIPS

Add this :

#navmenu {
    width:100%;
    display:inline-block;
}

#navmenu li {
    width:20%!important;
}

#navmenu a {
    width:100%!important;
    display:inline-block;
}

DEMO

Other solution will work but you will have to adjust width each time you add or remove an item...

Here is the css i have added: 

#navmenu{
    width: 100%;
    display:table;
}
ul#navmenu > li{
    display:table-cell;
    float: none;
}
ul#navmenu > li li{
    width: 100%;
}
#navmenu li .navmenu__wrap{
    position:relative;
    width: 100%;
}
#navmenu li a{
    width: 100%;
}

Also added an extra div to wrap all the element inside li width this class navmenu__wrap to keep position relative.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top