I'm trying to make a menu with submenu but when I hover the menu, submenu is opened itself. Here is my site where I try to make sub menu http://ilkereksioglu.com/
And my HTML:
<li class="dropdown">
Dropdown2 <b class="caret"></b>
<ul class="dropdown-menu">
<li class="kopie">Dropdown2</li>
<li>Dropdown2 Link 1</li>
<li>Dropdown2 Link 2</li>
<li>Dropdown2 Link 3</li>
<li class="dropdown dropdown-submenu">Dropdown2 Link 4
<ul class="dropdown-menu">
<li class="kopie">Dropdown2 Link 4</li>
<li>Dropdown2 Submenu Link 4.1</li>
<li>Dropdown2 Submenu Link 4.2</li>
<li>Dropdown2 Submenu Link 4.3</li>
<li>Dropdown2 Submenu Link 4.4</li>
</ul>
</li>
</ul>
</li>
Related
I am using MaterializeCSS's extended navbar with tabs to display content on my static website. I copied and pasted the example code into my project files, and while it seemed to work fine initially on my screen, when I began resizing it, I noticed that some of the tab names would get cut off, and the scrollbar that the documentation says should appear when this happens does not display on my end.
<header>
<nav class="nav-extended navColor" role="navigation">
<div class="nav-wrapper">
BRAND
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs navColor">
<li class="tab"><a class = "active" href="#all">All</a></li>
<li class="tab">Really Long Name 1</li>
<li class="tab">Really Long Name 2</li>
<li class="tab">Really Long Name 3</li>
<li class="tab">Really Long Name 4</li>
<li class="tab">Really Long Name 5</li>
<li class="tab">Really Long Name 6</li>
<li class="tab">Really Long Name 7</li>
<li class="tab">Really Long Name 8</li>
<li class="tab">Really Long Name 9</li>
</ul>
</div>
</nav>
<ul class="sidenav navColor" id="mobile-menu">
<li>Home</li>
<li>page 2</li>
<li>modal 2</li>
<li>Contact</li>
</ul>
</header>
codepen with materializecss and js: https://codepen.io/khw889ajv/pen/JjpvjEN
materialize tabs: https://materializecss.com/tabs.html
materialize navbar: https://materializecss.com/navbar.html
I have a simple topbar menu in html.How can i get it via wordpress ? walker_nav_menu is great,but i don't know how to use it properly as a newbie in wordpress.
<ul class="topbar-list topbar-menu">
<li>Blog</li>
<li>Contact</li>
<li>Forums</li>
<li>
Dropdown
<ul class="topbar-dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li class="topbar-submenu">
Submenu
<ul class="topbar-submenu-in">
<li>Submenu</li>
<li>Submenu</li>
<li class="topbar-submenu">
Submenu
<ul class="topbar-submenu-in">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="cd-log_reg hidden-sm hidden-md hidden-lg"><strong><a class="cd-signin" href="javascript:void(0);">Login</a></strong></li>
<li class="cd-log_reg hidden-sm hidden-md hidden-lg"><strong><a class="cd-signup" href="javascript:void(0);">Register</a></strong></li>
</ul>
sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
Is it possible to target only the "Pulldown Parent Menu" link below in CSS (I can't modify the code below)?
The line of code I wish to target so that I can modify it in CSS is:
<li class="page_item page-item-8">Pulldown Menu Parent
The page-item-8 class is dynamically generated so I can't rely on it.
The full code is:
<div id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-19">Contact</li>
<li class="page_item page-item-8">Pulldown Menu Parent
<ul class='children'>
<li class="page_item page-item-9">Test Page 2</li>
<li class="page_item page-item-11">Test Page 3</li>
<li class="page_item page-item-13">Test Page 4</li>
<li class="page_item page-item-15">Test Page 5</li>
<li class="page_item page-item-17">Test Page 6</li>
</ul>
</li>
</ul>
</div>
</div><!-- #access -->
How can I access the Pulldown Menu Parent link above in CSS?
At your Appearance > Menus, you can click Screen Options and click CSS Classes to add specific class for a specific menu item.
Click here for full image view