Full-width sub menu within the menu

I'm trying to make a sub menu appear below my main menu that is the same width as the main menu, which has a fixed width. I want the sub menu to adjust its width based on the number of links it contains. Is this even possible? Here's the code I have so far:

Check out the Fiddle

CSS

#nav a{
width: 115px;
height: 15px;
text-decoration:none;
display:block;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
color:#666666;
border: 1px solid green;
float: right;
padding: 10px 5px 5px 5px;
z-index: 2000;
}

#nav a li{
width: 115px;
height: 15px;
}

#nav:last-child {
border-right: 1px solid #999999; 
}

#nav a:active, #nav a:hover, #nav a:focus {
background: #999 ;
}
#nav li { 
display:block;
float:left;
}
#nav li:last-child {
border-right: 1px solid #999999; 
}
#nav li ul { 
display: table;
height: 30px;
position: absolute;
left: -9999px;
}
#nav li:hover ul {
left: 0; 
top: 30px; 
}
#nav li li {
display: table-cell;
}
#nav li li a{
text-decoration:none;
display:block;
font-size:9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #999999; 
color:#666666;
z-index: 10000;
padding: 5px 5px 10px 5px;
}

HTML

<ul id="nav">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a>
    <ul>
    <li><a href="#">LINK3 <br> MORE TEXT</a></li>
    <li><a href="#">LINK4</a></li>
    <li><a href="#">LINK5</a></li>
    <li><a href="#">LINK6</a></li>
    </ul></li>
<li><a href="#">LINK7</a></li>
<li><a href="#">LINK8</a>
    <ul>
    <li><a href="#">LINK9 <br> MORE TEXT</a></li>
    <li><a href="#">LINK10</a></li>
    <li><a href="#">LINK11</a></li>
    <li><a href="#">LINK12</a></li>
    <li><a href="#">LINK13</a></li>
    </ul></li>
</ul>

Thank you for your help!

Answer №1

I'm not quite sure I grasp the question at hand.

To properly structure the menus, both should be enclosed within a div element. This ensures that if subnav is set to 100% width, it will conform to the width of said div.

Could you provide a link for reference? Having a visual aid will enable me to offer more precise assistance.

Answer №2

#nav li targets all li elements within the #nav container, regardless of their nesting level. This means that even sub-menu lis are affected by this rule as they are still considered part of #nav li. To override this behavior, you can set specific styles for nested li elements like #nav li li with a declaration of width:auto !important;.

However, if you want to achieve a different look or layout, consider adding the following CSS:

#nav
{
width:660px;
position:relative;
}

#nav ul
{
display:table;
width:100%;
position:absolute;
top:30px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing. The challenge I'm facing is that for certain rows, I want to apply a specific background color using ...

Retrieving the value of a child in JSON

I have encountered this JSON structure and I am interested in extracting the value of "resource_uri" which is "/api/v1/client/2/". My implementation revolves around Backbone/javascript. Unfortunately, using json['resource_uri'] does not produce ...

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

Incorporate Vuetify's v-stepper seamlessly with Vue router for dynamic functionality

Seeking assistance in integrating vuetify's v-stepper with vue router. Specific requirements include: Assigning each step its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Creating components for each step that are dynamically lo ...

jQuery allows you to assign the identical function to multiple actions

I am faced with a situation where I have multiple actions that need to perform the same function. <ul> <li> <select id="s1"> <option>Name</option> <option>Year</option> ...

Utilizing precise data types for return values in React hooks with Typescript based on argument types

I developed a react hook that resembles the following structure: export const useForm = <T>(values: T) => { const [formData, setFormData] = useState<FormFieldData<T>>({}); useEffect(() => { const fields = {}; for (const ...

How can you access PHP $_GET values using JavaScript?

Recently, I encountered an issue with my app that is running on localhost/index.php. In my JavaScript code, I am using the History API as follows: history.replaceState({}, null, "?uid=" + uid); to update the URL of the page. Here, the variable uid holds ...

Guide on setting up ShareThis on a Vue.js project

I attempted to include this code in the public index.html file: <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5f4e15b2e56e550012ae1e77&product=inline-share-buttons' async='a ...

Ways to expose an object in a Node module

One of my modules relies on a parsing functionality, with other modules needing to query the values provided by this parser. I have some key questions regarding its design: How should I approach building it in terms of design aspects? Which method should ...

Using Vue for Firestore pagination

Utilizing the bootstrap-vue pagination component: <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" ></b-pagination> Component.vue: export default class PaginatedLinks extends Vue { public currentPage: number ...

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

How can I pass a value from a jQuery variable to a PHP variable?

Utilizing jQuery to create a table based on the output of JSON. The JSON values are retrieved from a SoapClient, which is functioning correctly and producing the desired output. https://i.sstatic.net/vJbfW.png Now, the goal is to assign the value of the ...

Sort the array by the elements in a separate array

Here is a filters array with three values: serviceCode1, serviceCode2, and serviceCode3. ['serviceCode1', 'serviceCode2', 'serviceCode3'] I have another array with approximately 78 records that I want to filter based on the a ...

Verify whether the cookie information is in an array format

As visitors click on products on my site, I am storing their IDs in a cookie. Each click adds the new ID to an array stored in the cookie. This is how I set up the cookie and its current value after a few clicks: var cookieArray = []; cookieArray.push( ...

Tooltips for Images in Vega Charts

As a developer skilled in d3, I am navigating the world of VEGA charts and seeking guidance on how to incorporate an image in a tooltip. Do you have any suggestions for me? For example, considering this particular scenario: If we assume there is an addit ...

Steps to assign a default value to the KeyboardTimePicker

I am utilizing the KeyboardTimePicker component from material ui to fetch a time of service such as "10:20". How can I make this time ("10:20") the default selection? When attempting to set this time, I am receiving an error stating " ...

What is the process of sending a modified array as text to TextEdit?

As a beginner in JXA, I am currently learning how to perform simple tasks in TextEdit. I have managed to extract the paragraphs of a document and store them as an array using the following code: app = Application('TextEdit') docPars = app.docu ...

Unlocking the potential of Three.js with mouse picking

I am looking to implement object picking in the following code snippet: var Three = new function () { this.scene = new THREE.Scene() this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000) this.camera.po ...

"Enjoying the convenience of a stationary header while browsing on your smartphone

Hey there! I'm currently facing an issue with my website's fixed horizontal nav bar when zooming in on a mobile device. After doing some research, it seems the only solution is to implement some javascript. I came across a jquery fix (see below) ...

What is the best method for navigating and passing data in dynamic routing with NEXT.JS?

In the process of developing my next.js ecommerce app, I am utilizing Firebase to fetch product data. My goal is to have users click on a product and be redirected to a new page displaying the details of that particular product. However, despite using the ...