I'm making a navigation where the children will be showed in a different box, much like http://www.boffi.com/EN/Collections/bathrooms/b14.aspx . I managed to separate the child using absolute positioning, but can't get the child elements background to have a 100% height. it's a list element, so if I put height: 100% , the bottom two main navigation elements dissapears. Please help! Here's my html:
<ul id="mainmenu">
<li id="liHome" class="active">
Home
</li>
<li id="liServices" class=" ">
Services
<div class="child">
<ul style="" id="SubMenuY2" class="submenu">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</div>
</li>
<li id="liEnvironment">
Environment
</li>
<li id="liCareer">
Career
</li>
<li id="liContact">
Contact
</li>
</ul>
and the css
body, html{
height:100%;
}
#mainmenu{
background:black;
color: white;
width:130px;
position:relative;
top:0;
height:100%
}
#mainmenu li a {
color:white;
}
ul.submenu{
position:absolute;
background:blue;
width:130px;
}
div.child{
position:relative;
margin-left:130px;
}
Thanks a lot for the help.
I simplified your code a little.. well I actually just removed the div with class="child", as you don't really need it.
Then, all I did was this:
ul.submenu{
position:absolute;
left: 130px; top: 0;
background:blue;
width:130px;
height: 100%;
}
Take a look at the fiddle: http://jsfiddle.net/joplomacedo/rqqju/
Was this what you were looking for?
Related
I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}
To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm doing a site in HTML, the front-end part, but I want to do menu with between a logo.
I tried with following
position:absolute;
top:180px;
right:300px;
But it's not responsive and I think it's a bad way to do that, I tried with the % but when I change the size of the window the logo isn't centered.
I simply put the logo in a ul and used vertical-align but it doesn't work.
Do you have any idea ?
Thank you.
This is my code
The HTML code is
<body>
<div id="nav">
<ul id="menu1">
<li>Section 1</li>
<li>Section 2</li>
</ul>
<ul id="menu2">
<li><img src"image.png" alt=""/></li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
and the CSS is
#nav
{
background-color:red;
width:550px;
height:150px;
}
#menu1, #menu2
{
list-style:none;
}
#menu1 li a
{
text-decoration:none;
font-size:18px;
float:left;
margin-top:50px;
margin-right:10px;
margin-left:10px;
}
#menu2 li a
{
text-decoration:none;
font-size:18px;
float:right;
margin-top:35px;
margin-left:10px;
margin-right:10px;
}
img
{
width:235px;
height:196px;
display:inline-block;
position:absolute;
margin-left:365px;
}
Already, the code for inserting the image is not good :
<img src="image.png" alt=""/>
This is the HTML:
<nav class="listfirst">
<li class="header"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</nav>
and the CSS:
#bottomnav{
width:1000px;
height:300px;
position:absolute;
top:5px;
left:10px;
}
#bottomnav .list1{
float:left;
margin-right:20px;
}
#bottomnav .listfirst{
float:left;
margin-right:20px;
margin-left:22px;
}
#bottomnav li{
width:165px;
height:22px;
margin-left:10px;
list-style-type: none;
display:block;
}
The lists in IE7 are just displaying as blocks and overflowing the container, whereas i need them to float left to stay in the bottomnav container.
I know it is probably a simple css fix but does anyone have any suggestions?
Please try below css code.
#bottomnav .list1{
float:left;
margin-right:20px;
*float:left; // this property apply in IE7
}
I think your html is incorrect. Always need to put <li> between an <ul> tag, and perhaps you missed to close <a> tags?
Example:
<nav class="listfirst">
<ul>
<li>Foo</li>
<li>Foo</li>
</ul>
</nav>
you have to specify:
#bottomnav li {
float:left;
}
cheers
I want to make a drop menu like the one in http://www.homeshop18.com/ with css only without jquery in particular the All category menu.I have tried css drop down menu but the problem is i am unable to fix the second level menu at the top. any suggestion will be appreciated.
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the menu on the site you posted.
HTML:
<ul class="main">
<li>all
<ul class="sub">
<li>books
<ul class="sub2">
<li>fiction</li>
<li>biography</li>
</ul>
</li>
<li>mobile
<ul class="sub2">
<li>android</li>
<li>cmda</li>
<li>battery</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
border:1px solid;
padding:1px;
}
.main {
list-style:none;
position:relative;
}
.sub, .sub2 {
list-style:none;
position:absolute;
display:none;
width:75px;
}
.sub2 {
float:left;
left:75px;
top:0px;
}
.main li:hover .sub,
.sub li:hover .sub2{
display:block;
}
I'm using wordpress 3.2.1 and worked on the wp_nav_menu to get a customized "Top navigation menu" that looks like this:
<ul id="nav-list">
<li>HOME</li>
<li>THE ASSOCIATION</li>
<ul class="sub-menu">
<li>
<a>WHO WE ARE</a>
</li>
</ul>
<li>CONTACTS</li>
<li>PRODUCTS</li>
<ul class="sub-menu">
<li>
<a>SHOES</a>
</li>
<li>
<a>UMBRELLAS</a>
</li>
</ul>
</ul>
the css I have for the menu is:
#nav-list{
float:left;
margin-left:290px;
}
#nav-list li
{
display:inline ;
padding:4px 18px 4px 0 ;
}
.sub-menu
{
float:left;
display:none;
}
ul#nav-list li:hover ul.sub-menu
{
background:red;
position:absolute;
top:20px;
z-index:9999;
display: block;
}
The sub-menus are by default hidden but they display on their parent's hover.Everything works fine but on the parent's hover the sub-menu is absolutely posiitoned with left=0 and I want it to be right under the parent button!How can I achieve that?
thanks
Luca
just set the parent li's position to relative; #nav-list li{position:relative}
i did it up on jsfiddle for ya, fyi i took out the margin-left on the #nav-list just so its more clear.
http://jsfiddle.net/jalbertbowdenii/deVYx/