I'm trying to get the dropdown menu to not expand the first-level ul on hover and display the items below but without setting a fixed width. Any ideas? Currently, the only nav item that has a menu is the 'Configure' tab.
nav ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: block;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 14px;
height: 25px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li {
float: left;
cursor: pointer;
border-left: solid 1px #AAD6EA;
height: 25px;
position: relative;
}
nav ul li div {
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
height: 100%;
padding: 0px;
float: left;
}
nav ul li:hover {
background-color: #AAD6EA;
color: #FFFFFF;
}
nav ul li:hover>ul {
display: block;
position: relative;
z-index: 1;
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul ul li {
background-color: #AAD6EA;
border-bottom: solid 1px #0085C3;
width: 100%;
/* float: none; */
}
nav ul ul li:hover {
color: #0085c3;
}
<div style="height: 100%; float: right; margin: 0; padding: 0; ">
<nav>
<ul>
<li>
<img src="img/help.png" id="vulcanUIHelp" style="margin-top: 5px; margin-right: 10px; margin-left: 10px;" alt="" width="16" height="16" title="Get UI help" />
</li>
<li>
<div id="configure">Configure</div>
<ul>
<li>
<div id="confmbpolicy">Middlebox Policy</div>
</li>
<li>
<div>Middlebox</div>
</li>
</ul>
</li>
<li>
<div id="settingsButton" title="Change system settings">Change Settings</div>
</li>
<li>
<div id="optionsLink" title="Open or close options window">Options</div>
</li>
<li>
<div id="help" title="Interactvely build a query">Build Query</div>
</li>
<li style="border-right: 0;">
<div id="logoutButton" title="Logout and close this window">Logout</div>
</li>
</ul>
</nav>
</div>
I've put the code I'm working on in a fiddle here: http://jsfiddle.net/aPbV4/
Thank you! All your help is appreciated!
how about ( as parent <li> is relative )
nav ul li:hover > ul {
display: block;
position: absolute;
top:25px;
left:0;
}
http://jsfiddle.net/aPbV4/3/
Related
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I'm trying to replica the navigation menu from this website. I've managed to it working to a certain extent, but can't make the service link when hovered to stay the same colour and all of the other to change.
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee !important;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
As you can see I've changed the link colours on hover of the unordered list which is probably not the best way of trying to get this to work. Please, could someone advise me on the best method to fix this?
You're close -- you have to remove the !important from the rule affecting .nav ul:hover a as this is overriding the rule that will ensure the hovered item is a different color than the rest:
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Here's a good resource on how !important affects other rules on the page.
I am wanting to align a vertical sub-submenu that is horizontal to a submenu, like this:
I am able to achieve this, as the picture shows, but I have to make the position absolute. The problem with that is I would want the top part of each sub-submenu to line up with the top of the submenu it is attached too. For instance, the artist sub-submenu would be exactly the same as the one shown, but would have A to Z lined up with Artist.
In order to do that the way I am doing it now, I would have to create many different css sections, rather than being able to select multiple submenus with one section (for instance #sortsongmenu, #sortartistmenu { styling }. I would like to find a way to have the sub-submenus in the position shown without having to position each sub-submenu separately, but rather have a styling approach that could apply to all sub-submenus that have relative or some other positioning.
HTML code:
<-- CSS code-->
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu li {
display: block;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
#sortsongmenu li, #sortartistmenu li{
display: inline;
}
#sortsongmenu li a:hover, #sortartistmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home
</li>
<li>
Search
</li>
<li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Artist</a>
<ul id="sortartistmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Album</a>
</li>
<li>
<a href='#'>Genre</a>
</li>
<li>
<a href='#'>BPM</a>
</li>
<li>
<a href='#'>Release Date</a>
</li>
</ul>
</li>
<li>
Add Song
</li>
<li>
Contant Us
</li>
</ul>
</div>
</div>
Try:
Change
#sortmenu li {
display: block;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
bottom: 65%;
width: 100px;
}
to
#sortmenu > li {
display: block;
position: relative;
}
#sortsongmenu, #sortartistmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
left: 100%;
top: 0;
width: 100px;
}
EDITED:
Change top to -5px, as your sub submenu have a border top of 5px. It will look better that way.
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.
I'm new in HTML and CSS.
Want to create menu with image and also want to show menu separator, menu should be horizontally aligned.
when we hover mouse on menu item, image and text color should change.
It should be look like as per image.
sry I forgot to upload the code, uploading here.
but now I want to show some menu items on left side( left align) and others on right side( right align)
.mainmenu{
background-color: black;
}
.mainmenu {
margin-top: 20px;
display: inline-block;
position: relative;
width: 100%;
}
.mainmenu li a {
display: block;
position: relative;
text-decoration: none;
text-align: center;
font-size: 10px;
color: gray;
line-height: 32px;
font-weight: bold;
text-shadow: black 0 1px 0;
font-family: sans-serif;
border-right: 1px solid #030304;
border-left: 1px solid #36393C;
white-space: nowrap;
}
.mainmenu ul.menu {
margin: 0;
width: 100%;
}
.mainmenu ul.menu li {
float: left;
list-style: none;
width: 16.666666666666668%;
}
.mainmenu ul.menu li a:hover {
color: #76b900;
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
}
<div>
<div class="mainmenu ">
<ul class="menu">
<li>
<a href="#">
<img src="images/nav-icons/home.png">HOME</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/users.png">
USERS
</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/gallary.png">
GALLARY
<a/>
</li>
<li>
<a href="#">
<img src="images/nav-icons/community.png">
COMMUNITY
</a>
</li>
</ul>
</div>
Thanks
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px;
/* To sift text off the background-image */
color: #3E789F;
background: url("../images/mySprite.png") no-repeat;
/* As all link share the same background-image */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
<ul class="menu">
<li class="firefox">Firefox
</li>
<li class="chrome">Chrome
</li>
<li class="ie">Explorer
</li>
<li class="opera">Opera
</li>
<li class="safari">Safari
</li>
</ul>