I wonder if it is possible to make the following work:
#keepwidth {
width: 1000px;
}
.row.top-menu > ul {
padding: 0;
}
.row.top-menu > ul > li {
display: inline-block;
}
.row.top-menu > ul > li > a {
display: inline-block;
background-color: #009ec3;
color: #fff;
min-width: 123px;
text-align: center;
text-transform: uppercase;
border: 2px #009ec3 solid;
border-radius: 3px;
margin: 0;
}
.row.top-menu > ul > li > a:hover {
background-color: #90d2ec;
color: #666;
text-decoration: none;
}
.row.top-menu > ul > li.dropdown:hover ul {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="keepwidth">
<div class="row top-menu">
<ul>
<li>
asdas
</li>
<li class="dropdown">
Hover here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
temp
</li>
</ul>
</li>
<li>
sadsad
</li>
<li>
asdasda
</li>
<li>
sadasdasdsa
</li>
<li>
sadasdsadsa
</li>
<li>
sadasdsasdasdsa
</li>
</ul>
</div>
</div>
I do not wish to make use of JavaScript and I do not wish to move the dropdown menu element around (e.g. margin-top: 0 or margin: 0) and I want to make the dropdown appear when hovering both the dropdown menu itself and the button refering to it.
Since you're using Bootstrap, you'll need to follow their CSS conventions as explained here in order to get predictable behavior:
https://jsfiddle.net/Bendrick92/mgny3g87/
#keepwidth {
width: 1000px;
}
.navbar-nav > li > a {
display: inline-block;
background-color: #009ec3;
color: #fff;
min-width: 123px;
text-align: center;
text-transform: uppercase;
border: 2px #009ec3 solid;
border-radius: 3px;
margin: 0;
}
.navbar-nav > li > a:hover {
background-color: #90d2ec;
color: #666;
text-decoration: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="keepwidth">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
asdas
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button">
Hover here <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
temp
</li>
</ul>
</li>
<li>
sadsad
</li>
<li>
asdasda
</li>
<li>
sadasdasdsa
</li>
<li>
sadasdsadsa
</li>
<li>
sadasdsasdasdsa
</li>
</ul>
</div>
</div>
Related
'data2' should be shown only on hover of SubSubmenu1, But it opens while hovering on SubMenu1 itself (along with data1 and subsubmenu1 dropdown). Can anyone guide me how to make it(data2) open only when hovered on SubSubmenu1. Thank you.
<div class="collapse navbar-collapse" id="myNavbarToggler4">
<ul class="navbar-nav">
<!-- menu item-->
<li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
<!-- menu item-->
<li class="has-dropdown">
Mainmenuitem2
<ul>
<li class="dropdown-submenu">
<!-- submenus -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
data-toggle="dropdown">SubMenu1</a>
<div id="SM1" style="margin-right:100px;" aria-labelledby="navbarDropdown">
<ul class="dropdown">
<li class="dropdown-item">
<input type="checkbox" id="data1" data-id=0 checked>
<label for="data1">data1</label>
</li>
<li class="dropdown-subsubmenu">
<!-- with submenu -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
data-toggle="dropdown">SubSubMenu1</a>
<div id="SubSubMenudata" style="margin-right:100px;" aria-labelledby="navbarDropdown">
// this dropdown opens when I hover on SubMenu1.
// Should open only when I hover on SubSubMENU1
<ul style="background-color: grey;" class="dropdown">
<li class="dropdown-item">
<input type="checkbox" id="d2" data-id=0 checked>
<label for="d2">data2</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
Below is the CSS.
ul ul li:hover ul,
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.dropdown {
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 14px;
}
Your code needs some improvement - I've chopped out some lines to make clear which needs you to reorganize it again. The functionally should be working now. Hope that's work!
ul ul li:hover ul,
ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.dropdown {
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 14px;
}
ul.left_menu{
width:180px;
padding:0px;
margin:0px;
list-style:none;
}
ul.left_menu li{
margin:0px;
list-style:none;
}
ul.left_menu li.odd a{
width:166px;height:25px;display:block; border-bottom:1px #e4e4e4 dashed;
text-decoration:none;color:#504b4b;padding:0;
line-height:25px;
}
.smenu{
display:none
}
ul.left_menu li.odd:hover .smenu
{
display:block;
color: #FFB03B;
}
ul.left_menu li.even:hover .smenu
{
display:block;
color: #FFB03B;
}
<ul class="left_menu">
<div class="collapse navbar-collapse" id="myNavbarToggler4">
<ul class="navbar-nav">
<!-- menu item-->
<li class="nav-item"><a class="nav-link" href="indexpage">Mainmenuitem1</a></li>
<!-- menu item-->
<li class="has-dropdown">
Mainmenuitem2
<ul>
<li >
<!-- submenus -->
<a style="background-color: grey; margin-right: 100px" href="#" class="dropdown-toggle"
>SubMenu1</a>
<ul >
<li class="even">SubSubMenu1
<!-- with submenu -->
<ul class="smenu">
<li >
<a>data2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</ul>
I havent tested this with your code. so it might not work perectly for you.
but below is a link to a thing called "onmouseover Events".
this is using javascript to apply the css on whats called "mouseover".
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
Documentation: https://www.w3schools.com/jsref/event_onmouseover.asp
see if maybe you can use this :)
Below is an CSS only example aswell if you dont want to use the java script example i posted.
Just click the "Run Snippet" button to test it.
* {
font-family: sans-serif;
}
#horizontalmenu ul {
list-style: none;
padding: 0;
}
#horizontalmenu>ul>li {
float: left;
position: relative;
border: 1px solid #555555;
border-radius: 3px;
background-color: #383838;
}
#horizontalmenu>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: white;
}
#horizontalmenu>ul>li>a:hover {
background-color: rgb(104, 104, 104);
}
#horizontalmenu>ul>li>ul {
background-color: rgb(148, 148, 148);
display: none;
width: 150px;
top: 100%;
left: 0;
position: absolute;
}
#horizontalmenu>ul>li>ul>li {
position: relative;
width: 100%;
display: block;
}
#horizontalmenu>ul>li>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: black;
}
#horizontalmenu>ul>li>ul>li>a:hover {
background-color: rgb(73, 73, 73);
}
#horizontalmenu>ul>li:hover>ul {
display: block;
}
#horizontalmenu>ul>li>ul>li>ul {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 150px;
}
#horizontalmenu>ul>li>ul>li>ul>li>a {
text-decoration: none;
padding: 5px 10px;
display: block;
color: black;
background-color: #797979;
}
#horizontalmenu>ul>li>ul>li:hover ul {
display: block;
}
<div id="horizontalmenu">
<ul>
<!-- list start -->
<li>
Menu 1
<ul>
<li>
text
</li>
<li>
text
</li>
<li>
text >
<ul class="horizontal">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>
text
</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li> text</li>
<li> text</li>
<li> text</li>
</ul>
</li>
</ul>
</div>
I have bootstrap 4 full width mega menu:
CSS:
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 20px;
width: 100%;
}
.megamenu > div > li > ul {
padding: 0;
margin: 0;
}
.megamenu > div > li > ul > li {
list-style: none;
}
.megamenu > div > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu > div > li > ul > li > a:hover,
.megamenu > div > li > ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu .dropdown-header {
color: #428bca;
font-size: 18px;
}
.megamenu .container{
background-color:#f4f4f4;
}
#media (max-width: 768px) {
.megamenu {
margin-left: 0;
margin-right: 0;
}
.megamenu > li {
margin-bottom: 30px;
}
.megamenu > li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
color: #fff;
}
}
Now, I add container and row in ul for show 4 columns. so add col-md-3 into row but In action col-md-3 not work true and i see empty on container.
HTML:
<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
<div class="container">
<a class="navbar-brand" href="/"> Brand </a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">Home
</li>
<li class="dropdown menu-large nav-item"> Categories
<ul class="dropdown-menu megamenu">
<div class="container">
<div class="row">
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
how do can i fix this problem?
problem in pic:
DEMO HERE
The issue is that a container inside a navbar is set to display:flex so you need to make your row full width by adding flex-grow-1 or w-100
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 20px;
width: 100%;
}
.megamenu > div > li > ul {
padding: 0;
margin: 0;
}
.megamenu > div > li > ul > li {
list-style: none;
}
.megamenu > div > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu > div > li > ul > li > a:hover,
.megamenu > div > li > ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu .dropdown-header {
color: #428bca;
font-size: 18px;
}
.megamenu .container{
background-color:#f4f4f4;
}
#media (max-width: 768px) {
.megamenu {
margin-left: 0;
margin-right: 0;
}
.megamenu > li {
margin-bottom: 30px;
}
.megamenu > li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
color: #fff;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
<div class="container">
<a class="navbar-brand" href="/"> Brand </a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">Home
</li>
<li class="dropdown menu-large nav-item"> Categories
<ul class="dropdown-menu megamenu">
<div class="container">
<div class="row flex-grow-1">
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-md-3 dropdown-item">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
when over menu the menu slips in HTML.
Codes and view:
https://codepen.io/anon/pen/XvrJpx
Demo:
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover>ul {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
Menu C and menu Bebek have submenu. When over menu the menu slips. I doesn’t would slip.
How I can resolve this problem?
I need your help.
All you have to do is remove the browsers default ul styles, as it is adding 40px of padding to the left, and position the sub-menu items absolutely.
In your case, this will work:
ul li ul {
padding: 0;
position: absolute;
}
To make the sub-menu easier to read, I would recommend having a background and some sort of border. eg:
ul li ul {
padding: 0;
position: absolute;
background: white;
border: 1px solid black;
}
Remove > ul from
.menuu li:hover {
display: block;
}
so that menu doesnt slip
Hope this is what you need
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
for some reason my menu bar (its fixed) is in 2 lines in chrome browser and normal in all other browsers. Any idea why or how to fix it? I tried to figure it out but i didnt fix it. Is it a problem with browser default block height or what? I need to make it work on chrome and on all other browsers too.
JsFiddle: https://jsfiddle.net/wkupr9L6/1/
HTML:
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 65) {
$("nav").css("opacity", "0.2");
}
else {
$("nav").css("opacity", "1");
}
});
</script>
</head>
<body>
<!--MENU BAR!-->
<nav class="navig">
<span class="nadpis"> RPO </span>
<ul class="nav">
<li class="prve">Dátumy
<ul>
<li>1-7/7/2016
<ul>
<li>1/7/2016</li>
<li>2/7/2016</li>
<li>3/7/2016</li>
<li>4/7/2016</li>
<li>5/7/2016</li>
<li>6/7/2016</li>
<li>7/7/2016</li>
</ul>
</li>
<li>8-14/7/2016
<ul>
<li>8/7/2016</li>
<li>9/7/2016</li>
<li>10/7/2016</li>
<li>11/7/2016</li>
<li>12/7/2016</li>
<li>13/7/2016</li>
<li>14/7/2016</li>
</ul>
</li>
<li>15-21/7/2016
<ul>
<li>15/7/2016</li>
<li>9/7/2016</li>
<li>10/7/2016</li>
<li>11/7/2016</li>
<li>12/7/2016</li>
<li>13/7/2016</li>
<li>14/7/2016</li>
</ul>
</li>
</ul>
</li>
<li class="druhe">☰
<ul>
<li> FLV
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> FLC
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> QUA
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> HFX
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> PDT
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul></li>
<li> RSH
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> BUR
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> SUHRN </li>
<li> INCI </li>
<li> JIRA </li>
<li> CHGT </li>
<li> TASK </li>
<li> VRS </li>
</div>
</ul>
</li>
</ul>
</nav>
CSS:
body, nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #111;
vertical-align: top;
top: -1px;
opacity: 1;
transition: 0.3s;
}
nav:hover {
opacity: 1!important;
background-color: #111;
transition: 0.3s;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
margin-right: 1px;
}
.nav li:hover > a {
transition: 0.3s;
background-color:#3a3939;
color: #40d23b;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
background-color: #000;
border: 2px solid #81D4FA;
border-top: none;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top:-1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
.prve{
max-width:125px;
min-width: 90px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
.druhe {
max-width: 14px;
min-width: 110px;
border-right: 2px solid #81D4FA;
}
span {
float:left;
margin-left: 3px;
}
span a{
text-decoration: none;
color:#2670CF;
background-color:#111;
font-family: 'Helvetica Neue', sans-serif;
font-size: 30px;
font-weight: bold;
}
Thanks for help
This doesn't seem like a browser issue. You have .nav set to display: inline-block; but nothing on the two inner <li> elements to force them onto the same line.
I added this:
.nav > li {
display: inline-block;
}
And it works for me in Chrome. See here:
https://jsfiddle.net/tobyl/wkupr9L6/6/
I am wanting to change some items that I have labeled using ids to one single class so that in my CSS I can refer to them with .sortsubmenu rather than #sortsongmenu, #sortartistmenu, etc.
The problem is that when I change one of them from an id to a class, it messes up the formatting. In the picture below, everything about the songsubmenu and artistsubmenu are exactly the same, only songsubmenu is identified using an id and artistsubmenu is identified using a class.
#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;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li:hover ul {
display: inline-block;
}
#sortsongmenu, .sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: 100px;
}
#sortsongmenu li, .sortsubmenu li {
display: inline;
}
#sortsongmenu li a:hover, .sortsubmenu 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 class="sortsubmenu">
<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>
Contact Us
</li>
</ul>
</div>
</div>
The #mainmenu li rule is getting in your way. It's not overridden by the class-based selector, as it was by the id-based selector.
Keep that positioning / size to the immediate descendants only, that is, change:
#mainmenu li {
to
#mainmenu > li {
and all is well.
#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;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li:hover ul {
display: inline-block;
}
#sortsongmenu,
.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: 100px;
}
#sortsongmenu li,
.sortsubmenu li {
display: inline;
}
#sortsongmenu li a:hover,
.sortsubmenu 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 class="sortsubmenu">
<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>
Contact Us
</li>
</ul>
</div>
</div>