How do I hide the drop-down button to the hover or click to display it? I specifically use foundation zurb plugin. Look my code:
HTML:
<ul class="menu" data-drilldown data-back-button='<li class="js-
drilldown-
back"><a class="new-back"></a></li>'style="width: 200px" id="m1">
<li>
Item 1
<ul class="menu">
<li>
Item 1A
<ul class="menu">
<li>Item 1Aa</li>
<li>Item 1Ba</li>
<li>Item 1Ca</li>
</ul>
</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
</ul>
The code doesn't mean much to you if you haven't used the drill dropdown foundation zurb plugin.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<html>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
</html>
Here, in the above code, how can I display half the text in the <li> tag in next line?
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to <br/> display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
Just add the <br/> tag where you want the next line to start.
Also if you want to do it using only css just make width:50% in the styling.
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li style="width:50%;">Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
This is a beginner level question, an <ul>'s <li> is a block element, unless you assign a width to the parent or the <ul> itself - text won't wrap! FYR, I just assign width to parent <ul>, you can assign a width to the child <ul>, too:
ul {
width: 200px;
}
Here is a fiddle example
I hope this helps!
I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));
I have a menu structure, like this:
<nav id="main">
<ul id="nav-user">
<li class="user-name">
<span class="name">John Doe</span>
<ul class="submenu">
<li>Profile</li>
<li>Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
<ul id="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
I'm having an issue with ul.submenu. It's overlaying ul#nav-main, but for some reason it's transparent:
http://jsfiddle.net/JvALU/
I don't want to see the ul#nav-main. How can I change that?
z-index can only be used with elements that are positioned relative, absolute, or fixed. Try adding position: relative; to ul.submenu.
Hope this helps.
I have a very good menu right here:
http://jsfiddle.net/y9jbQ/
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
the problem is now, let's say I want a right-arrow image, aligned to right in case when there's an other sub menu. Putting inside isn't healthy thing. I don't want to create anything to copy 's behaviour. So,
<li><div float left><div float right></li>
is not a good way.
Use a CSS Child Selector:
ul.root > li > a { /* css declarations */ }
This will only apply the rules to the direct descendants of the root ul element.
Illustration:
<ul class="root">
<li>
<!-- MATCH -->
</li>
<li>
<!-- MATCH -->
<ul>
<li>
<!-- NO MATCH -->
</li>
</ul>
</li>
</ul>
How can I place a div in between two list items, adding a margin on both sides?
Here is the layout I am trying to achieve: Link to Image
Below is the code I am trying to use to make this happen.
<div id="logo">
Logo Image
</div>
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Is there a way to do this without adding individual styles to the 2nd and 3rd list items? That's the only way I can think of doing this.
Get rid of the <div>, and give the <li> that you would want the <div> in its class:
http://jsfiddle.net/charlescarver/jTYnW/
<div id="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo">
Logo Image
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
You can try with this code
<ul>
<li>
<div>test</div>
</li>
<li>
<div>test</div>
</li>
<li class="specific">
<div>test</div>
</li>
<li>
<div>test</div>
</li>
</ul>
Adjust css to div